<template>
    <div>
        <div class="box">
            <headerView>
                <template v-slot:center>
                    <span class="changeText">选择区号</span>
                </template>
            </headerView>
        </div>

        <div class="content">
            <van-index-bar :index-list="AlphabetList" :sticky="true" :sticky-offset-top="50">
                <div v-for="(item, index) in firstName" :key="index">
                    <van-index-anchor :index="index">{{index}}</van-index-anchor>
                    <div v-for="(myItem, index1) in item" :key="index1">
                        <span @click.stop="getTel(myItem)">{{myItem}}</span>
                    </div>
                </div>
            </van-index-bar>
        </div>

    </div>
</template>

<script>
import { mapActions } from "vuex";
import pinyin from "wl-pinyin"
import headerView from "../components/headerView.vue";
import { code } from "../allData/tel/tel";
export default {
    components: {
        headerView
    },
    data() {
        return {
            AlphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
            employeeList: code,
            employeeNameList: [],
            firstName: {},
            tel: [],
        };
    },
    methods: {

        getData() {
            for (let k in this.employeeList) {
                this.employeeNameList.push(this.employeeList[k].name)
                this.tel.push(this.employeeList[k].tel)
            }
            this.AlphabetList.forEach((item) => {
                this.firstName[item] = [];
                this.employeeNameList.forEach((el, index) => {
                    /** 主要在这一句，el代表每个名字如 “安琪拉” ，
                    pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ，
                      .substring(0, 1) 就是只取第一个字符 ‘A’ **/
                    let first = pinyin.getFirstLetter(el).substring(0, 1);
                    if (first == item) {
                        this.firstName[item].push(el + " + " +this.tel[index])
                    }

                })
            })
            // console.log(this.firstName);
            // console.log(this.tel);
        },
        ...mapActions(['login/changeAreaCode']),
        getTel(val) {
            let telCode
            let arr = val.split('')
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] == "+") {
                    telCode = arr.slice(i+2).join('').toString()
                }
            }
            // console.log(val);
            // console.log(arr);
            // console.log(telCode);
            this['login/changeAreaCode'](telCode)
            this.$router.go(-1)
        },
    },
    created() {
        this.getData()
    }
};
</script>

<style scoped>
.box {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
}

.changeText {
    margin: 0 auto;
}

.changeNum {
    margin-top: 10px;
}

/* 具体内容 */
.content {
    padding-top: 14%;
    color: #605e5e;
}

.content span {
    font-size: 14px;
    padding-left: 20px;
}

.van-index-anchor {
    font-size: 20px;
}
.cSpan{
    font-size: 20px;
}
</style>